import { useEffect, useState } from 'react'
import { GetProductCategoryFnc } from '@/api/goods'
import style from './index.module.scss'
import { Breadcrumb, message, Input, Button, Alert, Steps, Form, Tabs, InputNumber, Cascader, Checkbox, Radio, Upload } from "antd"
import type { RadioChangeEvent } from 'antd'
import { getCookie } from '@/utils/cookie' 

const AddGoods = () => {
 const [headerObj] = useState({Authorization: getCookie('token')})
 const [activeKey, setActiveKey] = useState(0) // 步骤条当前index  
 const [options, setOptions] = useState([]) // 级联选择器
 const [checkedList, setCheckedList] = useState<string[]>([]) // 多选 基本参数颜色
 const [value, setValue] = useState('A') // 单选 基本属性
 const [fileLists, setFileList] = useState([]) // 已上传的图片

 // 级联选择器数据初始化
 const init = async () => {
   const res = await GetProductCategoryFnc()
   if(res.data.meta.status === 200) setOptions(res.data.data)
 }
 useEffect(() =>  { init() }, [])

 // 步骤条描述
 const items = [{description:'基本信息'},{description:'商品参数'},{description:'商品属性'},{description:'商品图片'}]

 // 基本信息
 const basic = () => {
  return (
   <>
    <Form.Item label="商品名称" name="goods_name" rules={[{ required: true, message: '请填写商品名称'}]}>
      <Input/>
    </Form.Item>

    <Form.Item label="商品价格" name="goods_price" rules={[{ required: true, message: '请填写商品价格'}]}>
      <InputNumber style={{ width: '100%' }}/>
    </Form.Item>

    <Form.Item label="商品数量" name="goods_number" rules={[{ required: true, message: '请填写商品数量'}]}>
      <InputNumber style={{ width: '100%' }}/>
    </Form.Item>

    <Form.Item label="商品重量" name="goods_weight" rules={[{ required: true, message: '请填写商品重量'}]}>
      <InputNumber style={{ width: '100%' }}/>
    </Form.Item>

    <Form.Item label="商品分类" name="goods_cat" rules={[{ required: true, message: '请填写商品重量'}]}>
      <Cascader style={{width: 200}} options={options} fieldNames={{label: 'cat_name', value: 'cat_id', children: 'children'}}  placeholder="--请选择--" />
    </Form.Item>
   </>
  )
 }

 // 基本参数
 const params = () => {
  return (
    <Form.Item label="商品颜色" name="goods_color" rules={[{ required: true, message: '请选择商品颜色,可多选'}]}>
       <Checkbox.Group options={['红色', '蓝色']} value={checkedList} onChange={(list: string[]) => setCheckedList(list)}/>
    </Form.Item>
  )
 }

 // 基本属性
 const attr = () => {
  return (
    <Form.Item label="商品颜色" name="goods_width" rules={[{ required: true, message: '请选择商品尺度'}]}>
      <Radio.Group value={value} onChange={(e: RadioChangeEvent) => setValue(e.target.value)}>
        <Radio value='A'>大于5米</Radio>
        <Radio value='B'>小于5米</Radio>
      </Radio.Group>
    </Form.Item>
  )
 }

 // 图片上传前 控制大小 格式
 const uploadBefore = (file: {size: number}) => {
    if (file.size / 1024 > 100) {
     message.error( '上传文件不能超过200kb',1.5)
     return false || Upload.LIST_IGNORE;
    }
     return true
 }

 // 删除图片
 const removeImg = (file: any) => {
  if(file.response.meta.status === 200) {
    const deletePath = file.response.data.tmp_path
       const index = fileLists.findIndex((item: any) => {
       return item === deletePath
    })
    setFileList(fileLists.splice(index, 1))
  }
 }

 // 上传图片
 const imgChange = ({file, fileList}: any) => {
   if(file.status === 'done') {
    if(file.response.meta.status === 200) {
     const arr = fileList.map((item: any) => {
        console.log(item)
        return item.response.data.tmp_path
     })   
     setFileList(arr)
    }
   }
 }

 // 商品图片
 const img = () => {
   return (
    <>
     <Upload multiple headers={headerObj} beforeUpload={uploadBefore} onRemove={removeImg} onChange={imgChange}  listType="picture" maxCount={5} action="http://127.0.0.1:8888/api/private/v1/upload">
       <Button>上传图片</Button>
     </Upload>
     
     <Button type="primary" htmlType="submit">添加商品</Button>
    </>
   )
 }

 const tabItems = [
   { key: '0', label: '基本信息', children: basic()},
   { key: '1', label: '基本参数', children: params()},
   { key: '2', label: '基本属性', children: attr()},
   { key: '3', label: '商品图片', children: img()}
 ]

 const onFinish = (value: any) => {
   console.log(value)
 }
   
 return (
  <>
   <Breadcrumb items={[{ title: '商品管理' }, { title: '商品列表', href: '/goods' }, { title: '添加商品' }]} />

   <div className={style.addContent}>
      <Alert message="添加商品信息" type="warning" showIcon />

      {/* 步骤条 */}
      <Steps className={style.step} current={activeKey} labelPlacement="vertical" items={items}/>

      {/* tab区域 */}
      <Form onFinish={onFinish} labelCol={{ span: 4 }} wrapperCol={{ span: 19, offset: 1 }} style={{ maxWidth: 600 }}>
        <Tabs items={tabItems} tabPosition='left' onChange={(activeKey: string) => setActiveKey(parseInt(activeKey))}/>
      </Form>
   </div>
  </>
 )
}
export default AddGoods